import React, { Component, lazy } from "react";
import { withRouter } from "../../router/hooks";
import "./list.less";
import { cloneDeepWith } from "lodash";

const ListItem = lazy(() =>
  import(/* webpackChunkName:'listItem' */ "./components/listItem/index")
);

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }
  get newData() {
    const { data } = cloneDeepWith(this.props);
    return data;
  }
  render() {
    return (
      <div className="list">
        <div className="list_content">
          {this.newData.map((item, index) => {
            let slot = cloneDeepWith(this.props.slot);
            slot.props = { ...slot.props, item };
            return <ListItem slot={slot} key={index} />;
          })}
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.setState({ data: cloneDeepWith(this.props.data) });
  }
}

export default withRouter(List);
